<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
        vertical-align: middle;
    }

    .box1 {
        width: 150px;
        height: 80px;
        margin: 100px auto;
        background-color: pink;
        white-space: nowrap;
        /*强制文字一行显示 */
        overflow: hidden;
        /* 溢出部分隐藏 */
        text-overflow: ellipsis;
        /* 溢出部分用省略号显示 */

    }
</style>

<body>
    <div class="box1">
        啥也不说了，以下省略一万字
    </div>
    <div class="box2">
        多行省略------->找后端吧!
    </div>
    <script>
    //设置一个元素的垂直对齐方式  只对行内和行内块元素有效
    // vertical-align 中线(middle) 底线(bottom)  基线(base  默认基线)  顶线(top)
    // 这些线是针对文字的

    //文字溢出显示省略号
    //1. 单行文本显示

    </script>
</body>

</html>